<template>
    <div>
        <div class="guidePage">
              <!-- Swiper -->
            <div class="swiper-container guidePage-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="guidePageslide">
                            <img src="https://img.zcool.cn/community/0142445d8600eda8012060be5857bc.jpg@1280w_1l_2o_100sh.jpg" alt="">
                            <!-- <h3>渐进式javascript框架</h3> -->
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="guidePageslide">
                            <img src="https://img.zcool.cn/community/0107795d8600eda801211d53ac000e.jpg@1280w_1l_2o_100sh.jpg" alt="">
                            <!-- <h3>渐进式javascript框架</h3> -->
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="guidePageslide">
                            <img src="https://img.zcool.cn/community/016e155d8600eea801211d53083c4d.jpg@1280w_1l_2o_100sh.jpg" alt="">
                            <!-- <h3>渐进式javascript框架</h3> -->
                            
                            <van-button type="primary" to="/" size="mini" class="vanbtn">立即体验</van-button>
                        </div>
                    </div>
                </div>
                <!-- Add Pagination -->
                <!-- <div class="swiper-pagination guidePage-pagination"></div> -->
            </div>
        </div>
    </div>
</template>

<script>
    // https://www.swiper.com.cn/
    // $cnpm install swiper@5.3.6 -S
    import Swiper from "swiper";
    export default {
        mounted(){
            new Swiper('.guidePage-container', {
                pagination: {
                    el: '.guidePage-pagination',
                },
            });
        }
    }
</script>

<style lang="less" >

    .swiper-container {
        position: fixed !important; 
        top:0px;
        left:0px;
      width: 100%;
      height: 100%;
    }

    .guidePageslide{
        text-align: center;
        position: relative;
        img{
            // margin:0 auto;
            // width: 120px;
            // height: 120px;
            // margin-top: 200px;
            height: 100%;
            width: 100%;
        }
        h3{
            color:#595959;
        }
        .vanbtn{
            position: absolute;
            bottom: 56px;
            left: 30%;
            width: 150px;
            height: 38px;
            border: 1px solid rgb(220,0,26);
            background-color: rgb(220,0,26);
            border-radius: 20px;
        }
    }
</style>